<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--
       The above 3 meta tags *must* come first in the head;
       any other head content must come *after* these tags
    -->
    <meta name="description" content="">

    <title th:text="${isSuccess}"></title>

    <link type="text/css" rel="stylesheet" href="../static/lr/bootstrap-4.1.0/css/bootstrap.min.css"
          th:href="@{/lr/bootstrap-4.1.0/css/bootstrap.min.css}">

    <link type="text/css" rel="stylesheet" href="../static/lr/css/common.css"
          th:href="@{/lr/css/common.css}">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../static/lr/jquery/jquery-1.11.2.min.js"
            th:src="@{/lr/jquery/jquery-1.11.2.min.js}"></script>
    <script type="text/javascript" src="../static/lr/bootstrap-4.1.0/js/bootstrap.min.js"
            th:src="@{/lr/bootstrap-4.1.0/js/bootstrap.min.js}"></script>
</head>

<body>

<h3 th:text="${isSuccess}" style="margin-left: 40%"></h3>


<!--生成MD5显示-->
<div class="container" th:if="${originMD5} eq true">
    <div class="form-group" th:if="${md5Value} ne 'NO_RESULT'">


        <div class="input-group" style="margin-top: 30px;min-width: 20%;max-width: 100%" >

            <button class="btn btn-md btn-primary btn-block" type="button" id="MD5" style="width: auto">请求本地API路径-[[${localUrl}]]</button>

        </div>

        <div class="input-group" id="errorDiv" style="display: none;margin-top: 30px;">
            <textarea name="jsonContent" id="errorResult" style="max-height: 200px;color: red;font-weight: bolder"
                      th:text="请求失败数据....." class="form-control md5-textarea"></textarea>
        </div>

        <div class="input-group" id="successDiv"  style="display: none;margin-top: 30px">
            <textarea name="jsonContent" id="successResult" style="min-height: 400px"
                      th:text="请求成功数据..." class="form-control md5-textarea"></textarea>
        </div>



        <label>生成的签名：</label>
        <div class="input-group">
            <input name="md5Value" th:value="${md5Value}" class="form-control"/>
        </div>

        <label>PostMan 请求头参数：
            <a href="#" style="font-size: 0.9rem" data-toggle="modal" data-target="#myModal">
                如何使用?
            </a>
        </label>

        <div class="input-group">
            <textarea name="postManHeader" th:text="${postManHeader}" class="form-control md5-textarea">
            </textarea>
        </div>
        <div class="input-group" style="margin-top: 30px">
            <a href="/lr/MD5">
                <button class="btn btn-md btn-primary btn-block" type="button">继续生成MD5</button>
            </a>
        </div>

        <h5 style="margin-top: 50px">请求数据信息:</h5>
        <label class="label label-default">userCode：</label>
        <div class="input-group">
            <div th:text="${userCode}" class="form-control" id=""></div>
        </div>
        <label>timestamp：</label>
        <div class="input-group">
            <div th:text="${timestamp}" class="form-control"></div>
        </div>

        <label>publicKeyCode：</label>
        <div class="input-group">
            <div th:text="${publicKeyCode}" class="form-control"></div>
        </div>
        <label>jsonContent：</label>

        <div class="input-group">
            <textarea name="jsonContent" id="ajaxResult"
                      th:text="${jsonContent}" class="form-control md5-textarea"></textarea>
        </div>
    </div>


    <div class="form-group" th:if="${md5Value} eq 'NO_RESULT'" style="margin-top: 30px">
        <div class="input-group">
            <a href="/lr/MD5">
                <button class="btn btn-md btn-primary btn-block" type="button">重新生成MD5</button>
            </a>
        </div>
    </div>
</div>






<!-- 如何使用模态框 -->
<div class="modal fade" id="myModal" style="width: auto">
    <div class="modal-dialog" style="max-width: 1000px">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">设置 PostMan 请求头参数</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" style="width: 100%;overflow: scroll">
                <img th:src="@{/lr/image/111.jpg}" width="900">
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">i know</button>
            </div>

        </div>
    </div>
</div>
</button>











<style>
    .modal-dialog {
        max-width: 1000px;
    }
</style>
<!-- /container -->
</body>
<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();

    });
    $("#MD5").click(function() {
        var data= $("ajaxResult").val();
        $.ajax({
            type: "POST",
            url: "[[${localUrl}]]",
           // contentType: "application/json",
            data: JSON.stringify(data),
            beforeSend: function(request) {
                request.setRequestHeader("usercode","[[${userCode}]]");
                request.setRequestHeader("utime","[[${timestamp}]]");
                request.setRequestHeader("sign","[[${md5Value}]]");
                request.setRequestHeader("Content-Type","application/json");
            },
            success: function(result) {
                console.log(result);
                $("#errorDiv").hide();
                $("#successDiv").show();
                $("#successResult").val(result);
            },
            error:function (XMLHttpRequest, textStatus) {
               console.log( XMLHttpRequest.responseText); //获取的信息即是异常中的Message
               console.log( textStatus); //获取的信息即是异常中的Message
                $("#successDiv").hide();
                $("#errorDiv").show();
                $("#errorResult").val(XMLHttpRequest.responseText);
            }

        });
    });


</script>
</html>
